<template>
  <div id="app" style="height: 100%;">
    <!--导航栏-->
    <nav class="navbar wjs_nav" >
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="navbar-brand">

              <a href="#" title="厉新设计"><img src="https://fulgorbrand.oss-cn-beijing.aliyuncs.com/Fulgorbrand/__logo_u69.png" alt="您的网络不稳定"></a>

          </div>

        </div>
        <div class="lixin_nav collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav nav-pills navbar-left ">
            <li><router-link to="/works" class="active"><span>作品/ Works</span></router-link></li>
            <li><router-link to="/service"><span>服务/ Service</span></router-link></li>
            <!-- <li><router-link to="/awards"><span>荣誉/ Awards</span></router-link></li> -->
            <li><router-link to="/Team"><span>团队/ Team</span></router-link></li>

          </ul>

          <ul class="nav nav-pills navbar-right hidden-sm">
            <!-- <li><router-link to="/Join"><span>加入/ Join</span></router-link></li>
            <li><router-link to="/Contact"><span>联系/ Contact</span></router-link></li> -->
            <li><span style="    color: #000000;
    height: 80px;
    line-height: 50px;
    position: relative;
    display: block;
    padding: 10px 15px;">YANG-JIAHUI</span></li>
          </ul>

        </div>
      </div>
    </nav>

    <!--**************      主内容开始     ***********-->
    <div class="lixinbanner">
      <!--<div class="tab-content">-->

        <router-view></router-view>

      <!--</div>-->
    </div>
    <!--**************      主内容结束     ***********-->
    <!--S 回顶部-->
    <div class="actGotop" >
      <a href="javascript:;">
        <img src="./assets/totop.png"/>
      </a><!--锚定-->
    </div>
    <!--E 回顶部-->
    <div class="footer">
      <span>ICP备案号：粤ICP备19027337号-1</span>
    </div>
  </div>
</template>

<script>

  window.onload = function () {


    function getScroll() {
      return {
        left: window.pageYOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
        top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
      }
    }

    //当页面超出去1000px的时候，让小火箭显示出来,如果小于1000，就让小火箭隐藏
    $(window).scroll(function () {
      // console.log($(window).scrollTop());
      if ($(window).scrollTop() >= 200) {
        //加 stop()
        // console.log("jinlaile")
        $(".actGotop").fadeIn(100);
      } else {
        $(".actGotop").fadeOut(100);
      }
    });

    //在外面注册
    $(".actGotop").click(function () {
      //加 stop()  不然一直点就滑下不来
      //$("html,body").stop().animate({scrollTop:0},3000);
      //scrollTop为0
      //瞬间上去  $(window).scrollTop(0);
      $(window).scrollTop(0);
    })
  }

  export default {
    name: "App"
  }
</script>

<style>
  /*!*导航条*!*/
  /*!*1.拷贝源码的模块样式：准确定位到所有元素的选择器并且能保证优先级比源码高*!*/
  /*!*2.针对功能进行覆盖：更改模块名称*!*/
  /*!*3.但是有一些没有用到的选择器 代码的冗余*!*/
  /*!*4. 删除：降低代码量 *!*/
  /*!*5. 保留：利于维护，方便产品跟新的时候不用再去修改代码 *!*/
  /*导航条*/
  /*1.拷贝源码的模块样式：准确定位到所有元素的选择器并且能保证优先级比源码高*/
  /*2.针对功能进行覆盖：更改模块名称*/
  /*3.但是有一些没有用到的选择器 代码的冗余*/
  /*4. 删除：降低代码量 */
  /*5. 保留：利于维护，方便产品跟新的时候不用再去修改代码 */
  .wjs_nav {
    position: fixed;
    height: 100px;
    margin-bottom: 0;
    border: none;
    /*固定导航样式*/
    z-index: 100;
    background: #fff;
    width: 100%;
    border-radius: 0;
    top: 0;
  }
  .wjs_nav .container{
    width: 100%;
  }
  .wjs_nav .navbar-brand {
    color: #777;
    height: 100px;
    line-height: 50px;
    padding: 0px ;
  }
  .wjs_nav .navbar-brand img{
    width: 100%;
    height: 100%;
    top: -1px;
    position: relative;
  }
  .wjs_nav .navbar-brand:hover,
  .wjs_nav .navbar-brand:focus {
    color: #5e5e5e;
    background-color: transparent;
  }

  .wjs_nav .nav-pills > li > a {
    color: #000000;
    height: 80px;
    line-height: 50px;
  }
  .wjs_nav .nav-pills > li > a:hover,
  .wjs_nav .nav-pills > li > a:focus {
    color: #777;
    background-color: transparent;
    border-bottom: 3px solid #35DBDB;
  }


  .wjs_nav .navbar-toggle {
    border-color: #ddd;
    margin-top: 23px;
  }
  .wjs_nav .navbar-toggle:hover,
  .wjs_nav .navbar-toggle:focus {
    background-color: #ddd;
  }
  .wjs_nav .navbar-toggle .icon-bar {
    background-color: #888;
  }

  .wjs_nav .navbar-nav > .open > a,
  .wjs_nav .navbar-nav > .open > a:hover,
  .wjs_nav .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #e7e7e7;
  }
  .lixin_nav{
    background-color: #ffffff;
  }
  .lixin_nav ul{
    padding-top: 10px;
  }

  @media (max-width: 767px) {
    .wjs_nav .navbar-nav .open .dropdown-menu > li > a {
      color: #777;
    }
    .wjs_nav .navbar-nav .open .dropdown-menu > li > a:hover,
    .wjs_nav .navbar-nav .open .dropdown-menu > li > a:focus {
      color: #333;
      background-color: transparent;
    }
    .wjs_nav .navbar-nav .open .dropdown-menu > .active > a,
    .wjs_nav .navbar-nav .open .dropdown-menu > .active > a:hover,
    .wjs_nav .navbar-nav .open .dropdown-menu > .active > a:focus {
      color: #555;
      background-color: #e7e7e7;
    }
    .wjs_nav .navbar-nav .open .dropdown-menu > .disabled > a,
    .wjs_nav .navbar-nav .open .dropdown-menu > .disabled > a:hover,
    .wjs_nav .navbar-nav .open .dropdown-menu > .disabled > a:focus {
      color: #ccc;
      background-color: transparent;
    }
  }
  .lixinbanner{
    /* padding-top: 110px; */
  }
  .footer{
    padding-top: 20px;
    padding-left: 18px;
    font-size: 12px;
    color: #999;
    position: fixed;
    bottom: 20px;
    width: 100%;
  }

  /*侧边漂浮按钮回顶部 开始*/
  .actGotop{
    width: 50px;
    height: 50px;
    position: fixed;
    right: 10px;
    top: 200px;
    display: none;
    background-color: #18c5d2;
    z-index: 100;
  }
  .actGotop img{
    width: 100%;
    height: 100%;
    transition: all 1s;
  }
  .actGotop a {
    display: inline-block;
    width: 50px;
    height: 50px;
  }
  .actGotop img:hover{
    transform: rotateY(180deg);;
  }
  /*侧边漂浮按钮 结束*/
</style>
